<script setup>
import { loginApi } from '@/api/user'
import { ElMessage } from 'element-plus'
import LoginForm from '@/views/login/LoginForm.vue'
import router from '@/router'
const handleLogin = async (loginData) => {
    const res = await loginApi(loginData)
    localStorage.setItem('loginUser', JSON.stringify(res.data))
    if (res.code) {
        ElMessage.success('登录成功！')
        router.push(`/`)
    } else {
        ElMessage.error('登录失败！')
    }
}
const handleReset = () => {
    console.log('表单已重置')
}
</script>

<template>
    <div class="login">
        <h3 class="title">{{ 用户登陆 }}</h3>
        <login-form ref="loginFormRef" @login="handleLogin" @reset="handleReset" />
    </div>
</template>

<style scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    background-image: url("../../assets/images/index.png");
    background-size: cover;
}

/* .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
} */
</style>